import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import classNames from 'classnames';
import styles from '../index.less';

const Index = (props) => {
  const {
    format = 'YYYY-MM',
    disabled,

    value,
    onChange,

    ...rest
  } = props;

  const newValue = value && moment(value, format);

  if (!Object.keys(props).includes('value')) {
    return 'DEPRECATED';
  }

  if (disabled && disabled.render) {
    return disabled.render(newValue?.format(format), { value, format }) || <span>&nbsp;</span>;
  }

  return (
    <span className={classNames(styles.col24, styles.componentWrapper)}>
      <DatePicker
        format={format}
        {...rest}
        picker="month"
        disabled={!!disabled}
        value={newValue}
        onChange={(date, dateString) => {
          if (onChange) {
            onChange(dateString || null);
          }
        }}
      />
    </span>
  );
};

Index.displayName = 'MonthPicker';
export default Index;
